<template>
    <div style="min-width: 100%;" :style="{height:screenOrWh.px2vh(230)}">
        <div style="min-width: 100%;height: 100%;overflow: auto" class="scorll-hidden-scr">
            <div class="mendian-line-base" :style="{minHeight:screenOrWh.px2vh(230)}"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {firChatSizeVw,firChatSizeVh} from '@/utils/echartsFont'
import screenOrWh from "@/utils/screenOrWh";
import instance from "@/api";
let mendianshuliangEcharts = null
export default {
    name: "mendianshuliang",
    props:{
        brandQi:{
            type:String
        }
    },
    data(){
      return {
          screenOrWh:screenOrWh,
          optionTiaoXing:{
              title: {
                  text: '门店数量统计图',
                  textStyle:{
                      color:'#fff',
                      fontWeight:650,
                      fontSize:firChatSizeVw(30),
                  },
                  left:0,
                  top:0,
              },
              toolbox:{
                  show:true,
                  feature: {
                      // saveAsImage: {},  // 导出图片
                      magicType: {show: true, type: ['line', 'bar']},
                  }
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              // legend: {
              //     top:firChatSizeVh(40) + 'vh',
              //     data:[{name:'门店一'},{name:'门店二'},{name:'门店三'},{name:'门店四'},{name:'门店五'}]
              // },
              grid: {
                  top: firChatSizeVw(80) + 'vh',
                  left: firChatSizeVw(0),
                  right: firChatSizeVw(0),
                  bottom: firChatSizeVw(0),
              },
              xAxis: {
                  type: 'value',
                  boundaryGap: [0, 1],
                  axisLine:{
                      show:true,
                      symbol:['none', 'arrow'],
                      lineStyle:{
                          color:'#9dc5f1'
                      }
                  },
                  splitLine:{
                      show:false,
                      lineStyle:{
                          color:'rgb(14, 174, 246)'
                      }
                  },
                  axisLabel:{
                      fontWeight: 550,
                      fontFamily:'Microsoft YaHei',
                      color: '#fff',
                  }
              },
              yAxis: {
                  type: 'category',
                  data: [],
                  axisLabel:{
                      color:'#9dc5f1',
                      fontFamily:'Microsoft YaHei',
                      fontWeight:800,
                  },
                  axisLine:{
                      show:true,
                      symbol:['none', 'arrow'],
                      lineStyle:{
                          color:'#9dc5f1'
                      }
                  },
              },
              series: [
                  {
                      type: 'bar',
                      data: [],
                      barWidth:firChatSizeVw(25) + 'vh',
                      label: {
                          show: true,
                          position: 'right',
                          fontFamily:'Microsoft YaHei',
                          color:'#efba0c',
                          fontWeight:600,
                      },
                      itemStyle:{
                          color:{
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 1,
                              y2: 0,
                              colorStops: [{
                                  offset: 0, color: 'rgb(10, 195, 239)' // 0% 处的颜色
                              }, {
                                  offset: 1, color: 'rgb(12, 240, 51)' // 100% 处的颜色
                              }],
                              global: false // 缺省为 false
                          },
                          borderRadius:[0,5,5,0],
                      }
                  }
              ]
          },
          barndQiId:''
      }
    },
    mounted() {
        //初始化门店数量
        this.$nextTick(()=>{
            mendianshuliangEcharts = echarts.init(document.querySelector('.mendian-line-base'));
            mendianshuliangEcharts.setOption(this.optionTiaoXing)
        })
        window.addEventListener('resize', () => {
            if(mendianshuliangEcharts){
                mendianshuliangEcharts.resize()
            }
        })

        // this.getMenDianNum()
    },
    methods:{
        getMenDianNum(brandQi = ''){
            if(brandQi) this.barndQiId = brandQi
            instance.get('/base/dashboard/outletCount',{
                params:{
                    periodId:this.barndQiId,
                    projectId:sessionStorage.getItem('projectId')
                }
            }).then(res => {
                if(res.data.code == 200){
                    if(res.data.data.length > 5){
                        this.optionTiaoXing.dataZoom = [
                            {
                                type: 'inside',
                                yAxisIndex: [0],
                                start:1,
                                end:40,
                            }
                        ]
                    }
                    this.optionTiaoXing.yAxis.data = []
                    this.optionTiaoXing.series[0].data = []
                    for(let val of res.data.data){
                        this.optionTiaoXing.yAxis.data.push(val.levelName)
                        this.optionTiaoXing.series[0].data.push(val.outletCount)
                    }
                    mendianshuliangEcharts.setOption(this.optionTiaoXing)
                }
                else{
                    this.optionTiaoXing.yAxis.data = []
                    this.optionTiaoXing.series[0].data = []
                    mendianshuliangEcharts.setOption(this.optionTiaoXing)
                    this.$message.error(res.data.msg || '门店数量获取失败')
                }

            })
        }
    }
}
</script>

<style scoped lang="scss">
.mendian-line-base{
  width: 100%;
  height: 100%;
}
</style>
